<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
    <script src="./jquery-3.7.1.min.js"> </script>
     <!-- <script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script> -->
</head>
<body>
        <button id="reset">重新开始一局游戏</button> <br>
        <span>请输入要猜的数字:</span> <input type="text" id="num"> <button id="guess">猜</button><br>
        <span>已经猜的次数:</span> <span id="times">0</span> <br>
        <span >结果:</span> <span id="rultes"></span>

        <script>
            let Num = Math.floor(Math.random()*100)+1;//获取随机数 random的值为[0,1) Num的值为[1,100)
            let count=0;//猜的次数
            console.log(Num);


            $("#guess").click(function(){//点击猜按钮后
                count++;
                let guessNum=$("#num").val();//获取数值
                if(guessNum<Num){
                    $("#rultes").text("猜小了");
                    $("#rultes").css("color","red");
                }else if(guessNum>Num){
                    $("#rultes").text("猜大了");
                    $("#rultes").css("color","red");
                }else if(guessNum==Num){
                    $("#rultes").text("猜对了");
                    $("#rultes").css("color","green");
                }else{
                    $("#rultes").text("输入错误");
                    $("#rultes").css("color","red");
                }
                $("#times").text(count);//修改猜的次数
            });

            $("#reset").click(function(){//点击重新开始
                Num = Math.floor(Math.random()*100)+1;
                console.log(Num);
                count=0;
                $("#times").text(count);
                $("#rultes").text("");
                $("#num").val("")
            });

        </script>
</body>
</html>